.latest-post,
.blog-masonry,
.blog-list {
	background-color: #f1f1f1;
	.post {
		position: relative;
		background-color: #fff;
		margin-top: 30px;
		overflow: hidden;
		&:hover {
			.post-media {
				.post-meta {
					ul {
						li {
							opacity: 1;
			                @include translateX(0);
			                &:nth-child(1) {
			                    @include transition-delay(0s);
			                }
			                &:nth-child(2) {
			                    @include transition-delay(.1s);
			                }
			                &:nth-child(3) {
			                    @include transition-delay(.2s);
			                }
			                &:nth-child(4) {
			                    @include transition-delay(.3s);
			                }
						}
					}
					~ div {
						&:after {
							opacity: 1;
							visibility: visible;
		                    @include transition-delay(0s);
						}
					}
				}
			}
		}
	}
	.post-inner {
		padding: 22px;
		.post-meta {
			margin-top: -8px;
			margin-bottom: 10px;
			ul {
				margin: 0 -6px;
				padding: 0;
				list-style: none;
				li {
					position: relative;
					display: inline-block;
					font-family: $pd;
					font-style: italic;
					font-size: 12px;
					margin: 5px 6px;
					.icon, .fa {
						display: none;
					}
					&:after {
						content: '//';
						display: block;
						position: absolute;
						right: -14px; top: 0;
					}
					&:last-child {
						&:after {
							display: none;
						}
					}
					a {
						color: inherit;
						&:hover {
							color: $color;
						}
					}
				}
			}
		}
	}
	.post-media {
		position: relative;
		img {
			width: 100%;
		}
		&:before {
			content: '';
			display: block;
			position: absolute;
			width: 0; height: 0;
			border: 10px solid transparent;
			border-bottom-color: #fff;
			left: 74px; bottom: 0;
			z-index: 99;
		}
		.post-meta {
			position: absolute;
			top: 50%; left: 16px;
			@include translateY(-50%);
			z-index: 9;
			ul {
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					position: relative;
					margin: 10px 0;
					z-index: 9;
					opacity: 0;
	                @include translateX(-50px);
					@include transition(all .25s ease);
	                &:nth-child(1) {
	                    @include transition-delay(.4s);
	                }
	                &:nth-child(2) {
	                    @include transition-delay(.3s);
	                }
	                &:nth-child(3) {
	                    @include transition-delay(.2s);
	                }
	                &:nth-child(4) {
	                    @include transition-delay(.1s);
	                }
					.icon, .fa {
						width: 30px; height: 30px;
						@include rounded(50%);
						border: 1px solid $color;
						text-align: center;
						line-height: 28px;
						font-size: 14px;
						color: $color;
						cursor: pointer;
						@include transition(all .3s ease);
					} 
					span, a {
						font-size: 12px;
						color: #fff;
						height: 30px;
					}
					a:hover {
						text-decoration: underline;
					}
					> span {
						position: absolute;
						display: inline-block;
						width: 30px;
						height: 30px;
						line-height: 30px;
						padding: 0;
						opacity: 0;
						visibility: hidden;
						overflow: hidden;
						background-color: $color;
						z-index: -1;
						left: 0; top: 0;
						@include rounded(30px);
						white-space: nowrap;
						@include transition(all .3s ease);
					}
					&:hover {
						.icon, .fa {
							color: #fff;
							@include translateX(2px);
						}
						> span {
							width: auto;
							opacity: 1;
							visibility: visible;
							padding-left: 35px;
							padding-right: 13px;
						}
					}
				}
			}
			~ div {
				&:after {
					content: '';
					position: absolute;
					display: block;
					width: 100%; height: 100%;
					top: 0; left: 0;
					background-color: rgba(255,255,255,.85);
					@include transition(all .3s linear .4s);
					opacity: 0;
					visibility: hidden;
				}
			}
		}
		
	}
	.post-title {
		.h5 {
			color: #3e3e3e;
			letter-spacing: 0.05em;
		}
		a {
			&:hover {
				color: $color;
			}
		}
	}
	.post-body {
		margin-top: 5px;
	}
	.post-footer {
		margin-top: 15px;
	}
}
.latest-slider {
	margin-top: 20px;
	.post {
		margin-left: 15px;
		margin-right: 15px;
	}
}
